<template>
  <view class="content">
    <view class="box">
      <view>
        <AtInput
          name='name1'
          type='number'
          :border="false"
          placeholder='请输入用户手机号'
          :value="mobile"
          @change="changeMobile"
        >
        </AtInput>
      </view>
      <AtButton type='secondary' v-show="show_open" class="button" @tap="openCard">立即开卡</AtButton>
      <AtButton type='primary' class="button" @tap="getUserInfo">去充值</AtButton>
    </view>
    <view class="box" v-if="false">
      <AtListItem
        :hasBorder="false"
        @click="isEmplyee = true"
        :title='showStaff'
        arrow='right'
        thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
      />
    </view>
    <!-- 选择员工 -->
    <AtFloatLayout :isOpened="isEmplyee" title="选择员工" :onClose="closeAtFloat">
      <view class="equ_line">
        <view class="equ_item" v-for="(item,index) in staffData" :key="index" @tap="clickButton(item.id)">
          <view class="equ_name">{{ item.name }}（{{ item.id }}）</view>
        </view>
      </view>
    </AtFloatLayout>
    <!-- 提示 -->
    <AtToast :isOpened="market.isShow" :text="market.text" icon="close"></AtToast>
    <AtToast :isOpened="openLoading" :text="open_text" status="loading"></AtToast>
  </view>
</template>

<script>
import './choseUser.scss';
import Taro from '@tarojs/taro';
import UserAPI from "../../api/user.js"
import exchange from "../../api/shiftExchange.js"
export default {
  data(){
    return{
      isEmplyee: false,
      staffData: [],
      showStaff:"选择员工",
      mobile: "",
      market: {
        isShow: false,
        text: "",
      },
      show_open: false, // 显示开卡按钮
      openLoading: false, // 开卡loading
      open_text: "正在开卡", // 开卡loading显示
    }
  },
  mounted(){
    this.initStorage();
  },
  methods: {
    changeMobile(val){
      this.mobile = val;
    },
    initStorage(){
      this.init()
    },
    async init(){
      const res = await exchange.employeeList();
      if (res.code == 200) {
        this.staffData = res.data;
        this.showStaff = Taro.getStorageSync("rechangeStaff") ? this.staffTitleTransiform(Taro.getStorageSync("rechangeStaff")) : '选择员工';
      } else{
        
        console.log(res);
      }
    },
    // 员工选择弹窗
    clickButton(id) {
      this.showStaff = "员工：" +this.staffTitleTransiform(id);
      Taro.setStorageSync("rechangeStaff", id);
      this.isEmplyee = false;
    },
    staffTitleTransiform(id) {
      let title = "";
      this.staffData.forEach(item => {
        if (item.id == Number(id)) {
          title = item.name + "(" + item.id + ")";
        }
      });
      return title;
    },
    async openCard(){
      this.open_text = "正在开卡"
      this.openLoading = true;
      var data = {
        app_id: Taro.getStorageSync('app_id'),
        mobile: this.mobile
      }
      const res = await UserAPI.userOpenCard(data);
      if(res.code == 200) {
        this.openLoading = false;
        this.open_text = '开卡成功'
        setTimeout(() => {
          this.openLoading = false;
        }, 1500);
        this.getUserInfo();
      }else{

      }
    },
    // 获取用户数据
    getUserInfo() {
      // 手机号
      if (this.mobile.length == 11 ) {
        var data = {
          token: Taro.getStorageSync('token'),
          app_id: Taro.getStorageSync('app_id'),
          page: 1,
          point_order: 0,
          mobile: this.mobile
        };
        UserAPI.getUserList(data).then(res => {
          if (res.code == 200) {
            this.show_user_infor = true;
            if (res.data.result.length > 0) {
              this.user_infor = res.data.result[0];
              Taro.setStorageSync('userInfor', this.user_infor);
              // 获取详细用户信息
              Taro.navigateTo({
                url: "/pages/recharge/card"
              })
            } else{
              this.market.isShow = true;
              this.market.text = "该用户没有用户信息！！！";
              console.log("该用户没有用户信息！！！");
              this.show_open = true;
            }
          }else{
            this.market.isShow = true;
            this.market.text = res.msg;
          }
        });
      } else{
        // 
        this.market.isShow = true;
        this.market.text = "请输入正确的手机号！！";
      }
    },
    closeAtFloat(){
      this.isEmplyee = false;
    }
  }
}

</script>
